@import '../../less/fn/_in';
@import '../../less/fn/_join';
@import '../../less/css3/misc/_border-radius';
@import '../../less/css3/misc/_box-sizing';
@import '../../less/css3/misc/_box-shadow';

@gutter: 5px;
@imageDim: 50px;


@animals: alpaca, bat, bear, beaver, bee, cat, chicken, cow, crocodile, dog, duck, elasmosaurus, elephant, giraffe, gnu, goat, hippo, kangaroo, leopard, lion, monkey, moose, mouse, owl, panda, peacock, penguin, pig, prontosaurus, pterodactylus, rabbit, rhino, sheep, squirrel, tiger, trex, triceratops, turkey, zebra;
@bird: chicken, duck, owl, peacock, penguin, turkey;
@dinosaur: elasmosaurus, prontosaurus, pterodactylus, trex, triceratops;
@extinct: elasmosaurus, prontosaurus, pterodactylus, trex, triceratops;
@underwater: elasmosaurus;
@pet: cat, dog, mouse, rabbit;
@safari: alpaca, crocodile, elephant, giraffe, hippo, gnu, leopard, lion, monkey, moose, rhino, tiger, zebra;
@dangerous: bear, crocodile, elephant, gnu, hippo, kangaroo, leopard, lion, panda, rhino, tiger, elasmosaurus, prontosaurus, pterodactylus, trex, triceratops;
@farm: chicken, cow, dog, duck, goat, mouse, pig, rabbit, sheep, turkey;
@forest: bear, beaver, bee, mouse, owl, rabbit, squirrel;
@fly: bat, bee, duck, chicken, owl, pterodactylus, turkey;

.sprite-position(@i) {
    background-position:  ((@i - 1) * -@imageDim) -@imageDim;
}
.sprite-position(@i) when (@i < 21){
    background-position: ((@i - 1) * -@imageDim) 0 ;
}


.bird(@bool) when (@bool) {
    .join(@string 'is a bird', ' ');
}
.forest(@bool) when (@bool) {
    .join( @string 'lives in a forest', ' ');
}
.dangerous(@bool) when (@bool) {
    .join(@string ' is dangerous', ' ');
}
.pet(@bool) when (@bool) {
    .join(@string 'can be held as a pet', ' ');
}
.dinosaur(@bool) when (@bool) {
    .join(@string 'is a dinosaur', ' ');
}
.safari(@bool) when (@bool) {
    .join(@string 'can be seen on a safari', ' ');
}
.farm(@bool) when (@bool) {
    .join(@string 'lives on a farm', ' ');
}
.fly(@bool) when (@bool) {
    .join(@string 'can fly', ' ');
}
.extinct(@bool) when (@bool) {
    .join(@string 'is extinct', ' ');
}
.underwater(@bool) when (@bool) {
    .join(@string 'lives underwater', ' ');
}

body {
    background: #fff8c2;
}
*, *:before, *:after {
    .box-sizing(border-box);
    margin: 0;
    padding: 0;
}
.animal {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    background: #cec79c;
    color: #333226;
    position: relative;
    font-weight: 700;
    font-family: sans-serif;
    font-size: 12px;
    margin: @gutter;
    padding: @gutter;
    list-style: none;
    & {
        .border-radius(3px);
        .box-shadow(2px 2px 0 0 #868692);
    }
    &:hover {
        background: #868692;
        .box-shadow(2px 2px 0 0 #333226);
    }
    &:after ,&:before {
        display: inline-block;
        vertical-align: middle;
        padding: @gutter;
    }
    &:before {
        background-image: url('../images/sprites/animaless.png');
        background-size: auto (@imageDim * 2);
        height: @imageDim;
        width: @imageDim;
        content: '';
    }
    & {
        .for(1,length(@animals));.-each(@i){
            @class: extract(@animals, @i);
            &.@{class}:before {
                .sprite-position(@i);
            }
        }
    }
    .for(@animals);.-each(@i) {
        @string: 'The @{i}';
        &.@{i} {
            &:after {
                & {.in(@forest, @i);.forest(@-);
                    & {.in(@dangerous, @i);.dangerous(@-);
                        & {.in(@dinosaur, @i);.dinosaur(@-);
                            & {.in(@farm, @i);.farm(@-);
                                & {.in(@pet, @i);.pet(@-);
                                    & {.in(@bird, @i);.bird(@-);
                                        & {.in(@safari, @i);.safari(@-);
                                            & {.in(@fly, @i);.fly(@-);
                                                & {.in(@underwater, @i);.underwater(@-);
                                                    & {.in(@extinct, @i);.extinct(@-);
                                                        content: '@{string}.';
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (   -moz-min-device-pixel-ratio: 2),
only screen and (   -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (           min-resolution: 192dpi),
only screen and (            min-resolution: 2dppx) {
    .animal:before {
        background-image: url('../images/sprites/animaless@2x.png');

    }
}